<template>
  <div class="g2-home g2-layout g2-container">
    <header class="home-header">
      <h1>g2Admin后台管理系统</h1>
      <div>遵循原生 HTML/CSS/JS 的书写与组织形式，上手容易，拿来即用。</div>
    </header>
    <el-row :gutter="20" class="g2-m-t-md">
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="g2-linecard">
              <header class="linecard-title">日成交额</header>
              <main>
                <span class="linecard-text">￥229,200</span>
                <span>万元</span>
              </main>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="g2-linecard linecard-br__success">
              <header class="linecard-title">日新增用户</header>
              <main>
                <span class="linecard-text">￥229,200</span>
                <span>万元</span>
              </main>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="g2-linecard linecard-br__warning">
              <header class="linecard-title">待处理订单</header>
              <main>
                <span class="linecard-text">￥229,200</span>
                <span>万元</span>
              </main>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header">快捷操作</div>
              <el-row>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
                <el-col :span="6">
                  <i class="iconfont g2-icon-search"></i>
                  <p>发布文章</p>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header">
                <span>最新评论</span>
              </div>
              <div class="g2-list">
                <div class="list-item">
                  竹鼠是无辜的 说：大家来看看，这是有多丑。。[照片][照片]
                </div>
                <div class="list-item">
                  竹鼠是无辜的 说：大家来看看，这是有多丑。。[照片][照片]
                </div>
                <div class="list-item">
                  竹鼠是无辜的 说：大家来看看，这是有多丑。。[照片][照片]
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-card size="small">
            <div slot="header">
              <span>版本信息</span>
            </div>
            <el-row>
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <td>当前版本</td>
                    <td>v1.0.0</td>
                  </tr>
                  <tr>
                    <td>基于框架</td>
                    <td>v1.0.0</td>
                  </tr>
                  <tr>
                    <td>主要特色</td>
                    <td>单页面 / 响应式 / 简洁</td>
                  </tr>
                  <tr>
                    <td>下载源码</td>
                    <td>单页面 / 响应式 / 简洁</td>
                  </tr>
                </tbody>
              </table>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {}
};
</script>

<style scoped lang="scss">
</style>
